<template>
  <div class="page-min">
        <div class="sreach-view">
                <el-form ref="form"  label-width="80px">
                    <el-form-item label="添加入:" style="width:250px">
                        <el-input  size="mini"  v-model="form.data.name" placeholder="添加入"></el-input>
                    </el-form-item>
                    <el-form-item label="状态:" style="width:250px">
                          <el-select size="mini" 
                            clearable
                            v-model="form.data.status" 
                            placeholder="请选择">
                            <el-option
                              v-for="item in [{label:'开',value:'1'},{label:'关',value:'2'}]"
                              :key="item.value"
                              :label="item.label"
                              :value="item.value">
                            </el-option>
                          </el-select>
                    </el-form-item>
                     <el-form-item label="" prop="name" style="width:300px">
                        <el-button type="primary" size="mini"  icon="el-icon-search"  @click="btnQuery">查询</el-button>
                        <el-button size="mini"  icon="el-icon-scissors"  @click="btnQuery">重置</el-button>
                        <el-button type="primary" size="mini"  icon="el-icon-plus"  @click="btnAdd">添加</el-button>
                    </el-form-item>
                </el-form>
        </div>       
        <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
            <el-tab-pane 
                v-for="(item,index) in tabList" 
                :key="index" 
                :label="item.latentDangerName" 
                :name="item.latentDangerName">
            <gridTable :title="item.latentDangerName+'列表'" 
                :page="form" width="200" 
                :data="item.cusLatentDangerCateVOList||[]" 
                :columnList="columnList">
                <template #actions="{row}">
                        <el-button  @click="btnDetail(row)"   type="text">查看</el-button>
                        <el-button  @click="btnDetail(row)"   type="text">编辑</el-button>
                        <el-button  @click="btnDel(row)"   type="text">删除</el-button>
                  </template>
              </gridTable>
            </el-tab-pane> 
        </el-tabs>

        <el-dialog 
            class="padding-dialog"  
            :visible.sync="dialogVisible" 
            :close-on-click-modal="false"	 
            width="600px"  
            :title="title">
           <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
                <el-form-item label="隐患名称" prop="latentDangerName" style="width:300px">
                    <el-input size="mini" v-model="ruleForm.latentDangerName"></el-input>
                </el-form-item>
                <el-form-item label="隐患等级" prop="latentDangerLevel" style="width:300px">
                    <el-select size="mini" v-model="ruleForm.latentDangerLevel" placeholder="请选择隐患等级">
                        <el-option label="一级" :value="1"></el-option>
                        <el-option label="二级" :value="2"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item v-if="ruleForm.latentDangerLevel==2" label="上级名称" prop="pid" style="width:300px">
                    <el-select size="mini" v-model="ruleForm.pid" placeholder="请选择隐患等级">
                        <el-option 
                         v-for="(item,index) in tabList" 
                         :key="index"
                         :label="item.latentDangerName"
                         :value="item.id"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="状态" prop="status" style="width:300px">
                    <el-switch size="mini"
                        :active-value="1"
                        :inactive-value="2"
                       v-model="ruleForm.status">
                     </el-switch>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="submitForm('ruleForm')">保存</el-button>
                    <el-button @click="resetForm('ruleForm')">重置</el-button>
                </el-form-item>
                </el-form>
        </el-dialog>
  </div>
</template>

<script>
import  {
    findLatentDangerCateList,
    insertLatentDangerCate,
    deleteLatentDangerCate
}  from '@/api/user'
import gridTable from '@/components/eTable'

export default {
  components:{
    gridTable
  },
  data() {
    return {
        tableData: [],
        dialogVisible:false,
        form: {
          data:{name:'',status:''},
          page:1,
          pageSize:10,
        },
        title:'',
        pData:null,
        activeName:'1',
        columnList:[
          {label:'隐患类型',prop:'latentDangerName',iStrue:false},
          {label:'添加人',prop:'creatorName',iStrue:true},
          {label:'添加时间',prop:'createTime',iStrue:true},
          {label:'状态',prop:'status',iStrue:true}
        ],
        tabList:[],
        ruleForm: {
            latentDangerLevel:'',
            latentDangerName:'',
            pid:'0',
            status:''
        },
        rules: {
          latentDangerLevel: [
            { required: true, message: '此项不能为空', trigger: 'blur' },
          ],
          latentDangerName: [
            { required: true, message: '此项不能为空', trigger: 'blur' }
          ],
          pid: [
            { required: true, message: '此项不能为空', trigger: 'blur' }
          ],
          status: [
            { required: true, message: '此项不能为空', trigger: 'blur' }
          ]
        } 
    }
  },
  created(){
    this.getPageList()
  },
  methods: {
    btnQuery(){
      this.getPageList()
    },
     getPageList(){
           findLatentDangerCateList(this.form).then((res)=>{
               if(res.code==0){
                 this.tabList = res.data.data
                 if(this.tabList.length>0){
                      this.activeName=this.tabList[0].latentDangerName
                 }
                 this.total = res.total
              }else{
                 this.tableData = []
              }
          })
     },
     handleClick(tab, event) {
        console.log(this.activeName);
    },
    btnAdd(){
        this.title="新增"
       this.dialogVisible = true
    },
     submitForm(){
        this.$refs['ruleForm'].validate((valid) => {
            if (valid) {
                insertLatentDangerCate(this.ruleForm).then((res)=>{
                    if(res.code==0){
                       this.$message({
                        message: '保存成功',
                        type: 'success'
                      });
                       this.dialogVisible = false
                        this.getPageList()
                    }else{
                        this.$message({
                            message: '保存失败',
                            type: 'error'
                        })
                    }
                })
            } else {
                return false;
            }
        });
     },
      resetForm(formName) {
        this.$refs[formName].resetFields();
     },
     handleSizeChange(val) {
        console.log(`每页 ${val} 条`);
      },
      handleCurrentChange(val) {
        this.form.currentPage = val
        this.getPageList()
      },
      btnDetail(item){
         this.title='详情'
         this.ruleForm={
            id:item.id,
            latentDangerLevel:item.latentDangerLevel,
            latentDangerName:item.latentDangerName,
            pid:item.pid,
            status:item.status
        }
        this.dialogVisible = true
      },
      btnSetting(){
        this.$router.push({ path: '/configuration' })
      },
      btnDel(item){
       this.$confirm('此操作将永久删除该数据, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
           deleteLatentDangerCate({id:item.id}).then((res)=>{
               if(res.code==0){
                 this.$message({
                    type: 'success',
                    message: '删除成功!'
                  })
                   this.getPageList()
              }else{
                  this.$message({
                    message: '删除失败',
                    type: 'error'
                   })
              }
          })
        }).catch(() => {      
        })
      }
  }
}
</script>

<style lang="scss" scoped>
.page-min{
    margin: 10px;
    background-color: #fff;
    border:1px solid #ddd;
    border-radius:4px;
    padding:10px;
}
.sreach-view{
    border-bottom:1px solid #EAEDF0;
    display: flex;
    align-items: center;
    padding-bottom: 10px;
    flex-flow: wrap;
     .el-form{
        display: flex;
        flex-wrap: wrap;
        justify-content:flex-start;
        .el-form-item{
          margin-bottom:6px;
        }
        }
        .el-form-item__label{
            color: #666;
            font-weight: normal;
        }
        .btn-open{
          cursor: pointer;
          margin-left:20px;
          font-size:14px;
          color:#1890ff;
          i{
            font-size:14px;
            color:#1890ff;
          }
        }
}
.tools-view{
  text-align: right;
  padding:10px 0;
  position: relative;
  .title{
    position:absolute;
    left:0;
    font-size:16px;
    color:#606266;
    font-weight: normal;
    height:30px;
    line-height:30px;
  }
  i{
    font-size:16px;
    cursor: pointer;
    color: #606266;
    margin-left:10px;
    border-radius:50%;
    height:30px;
    width:30px;
    text-align: center;
    line-height:30px;
    border:1px solid #dcdfe6;
  }:hover{
    color:#1890ff;
  }
}

.el-form{
  display: flex;
  flex-wrap: wrap;
  justify-content:flex-start;
}
.el-form-item__label{
    color: #666;
    font-weight: normal;
}

</style>